<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <span>播放全部<span>(共{{ itemList.length }}首)</span></span>
            </div>

            <div class="listRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{ subscribedCount }})</span>
            </div>
        </div>

        <div class="itemList">
            <div class="item" v-for="(item, i) in itemList" :key="i">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="leftLeft">{{ i + 1 }}</span>
                    <div class="leftRight">
                        <p>{{ item.name }}</p>
                        <p><span v-for="(item1, index) in item.ar" :key="index">{{ item1.name }} &numsp;</span></p>
                        
                    </div>
                </div>
                <div class="itemRight">
                    <div class="img1">
                        <svg class="icon" aria-hidden="true" v-if="item.mv != 0">
                            <use xlink:href="#icon-bofang2"></use>
                        </svg>
                    </div>
                    <div class="img2">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-danlieliebiao"></use>
                        </svg>
                    </div>

                </div>
            </div>
        </div>
        <div class="lala"></div>
    </div>
</template>



<script>
import { mapMutations } from 'vuex';

export default {
    setup(props) {
        console.log(props)
    },
    props: ['itemList', 'subscribedCount'],
    methods:{
        playMusic:function(i){
            this.updateplayList(this.itemList)
            this.updatePlayListIndex(i)
        },
        ...mapMutations(['updateplayList','updatePlayListIndex'])
    }
}
</script>

<style lang="less" scoped>
.itemMusicList {
    width: 100%;
    height: 100%;
    // flex-shrink: 1;
    // flex: 1;
    background-color: #fff;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    overflow: auto;
    // margin-bottom: 5px;
    // flex: 1;
    padding-bottom: 1.4rem;
    .itemListTop {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .listLeft {
            width: 3rem;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                font-weight: 800;

                span {
                    font-weight: 200;
                    color: gray;
                }
            }
        }

        .listRight {
            width: 3rem;
            height: 80%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgb(129, 216, 207);
            border-radius: .6rem;

            .icon {
                color: #fff;
            }
        }
    }


    .itemList {
        width: 100%;
        height: 100%;

        // background-color: aqua;
        // display: flex;
        // flex-direction: column;
        .item {
            width: 100%;
            height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .itemLeft {
                width: 6rem;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .leftRight {
                    width: 5.6rem;
                    display: flex;
                    flex-direction: column;
                    // justify-content:flex-start;
                    // background-color: aqua;


                    p {
                        font-weight: 800;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        
                    }

                    span {
                        // display: flex;
                        font-weight: 200;
                        font-size: .13rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        // background-color:bisque ;
                    }
                }
            }

            .itemRight {
                width: 1.3rem;
                // background-color: red;

                .img1 {
                    float: left;
                }

                .img2 {
                    float: right;
                }
            }
        }
    }
    // .lala{
    //     width: 100%;
    //     height: 1.4rem;
    //     background-color: aqua;
    // }
}
</style>